<template>
  <div>
    <h1>ToList</h1>

    <table>
      <thead>
        <tr>
          <th>标题</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="u in users" :key="u.id">
          <td>{{ u.title }}</td>
          <td>{{ status[u.status] }}</td>
          <td>
            <button @click="del(u.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";

import axios from 'axios';
const request = axios.create({
  baseURL: 'http://127.0.0.1:8081'
});

const users = ref([]);
const status = { 1: '已完成', 2: '进行中', 3: '未完成' };

async function getLists() {
  const { data } = await request.get('/lists');
  users.value = data;
}

getLists();

async function del(id) {
  if (confirm('确定删除吗') === false) return;
  await request.delete(`/lists/${id}`);
  getLists();
}

</script>